<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            *{margin:0 auto;padding: 0;list-style-type: none;}
            div{width:1200px;height:300px;position: relative;margin: 50px auto;border: 2px solid #010;}
            ul{width:1200px;height:300px;position: absolute;top:0;left: 0;}
            ul li{width:1200px;height:300px;position: absolute;top:0;left: 0;opacity: 0;filter:alpha(opacity=0);z-index: -1;}
            ul li img{width: 100%;height: auto;}
            .select{opacity: 1;filter:alpha(opacity=100);z-index: 1;}
            ol{position: absolute;bottom:10px;margin:0 auto;text-align: center;width:100%;height:10px;z-index: 10;background: red;}
            ol li{width:20px;height: 5px;background: #000;float: left;margin:0 5px;}
            .active{background: #fff;}
            span{width: 32px;height:40px;position: absolute;margin-top: -20px;top:50%;background: #000;color:#fff;line-height: 40px;text-align: center;cursor: pointer;z-index: 10;}
            .prev{left:0;}
            .next{right:0;}
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li class="select">
                    <img src="img/1.jpg" alt=""/>
                </li>
                <li>
                    <img src="img/2.jpg" alt=""/>
                </li>
                <li>
                    <img src="img/3.jpg" alt=""/>
                </li>
                <li>
                    <img src="img/4.jpg" alt=""/>
                </li>
                <li>
                    <img src="img/5.jpg" alt=""/>
                </li>
            </ul>
            <ol>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
            <span class="prev">-</span>
            <span class="next">+</span>
        </div>
        <p></p>
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var div = $("div");
            var ul = $("ul");
            var uli = $("ul li");
            var oli = $("ol li");
            var uli_n = $("ul li").length;
            var index = 0;
            var span = $("span");
            var time = 1000;
            var tick;
            $(".prev").click(function () {
                if (index === 0) {
                    fadeout(index, 0);
                    index = uli_n;
                    fadein(index - 1, 0);
                } else {
                    fadeout(index, 0);
                    fadein(index - 1, 0);
                }
                index--;
            });
            $(".next").click(function () {
                fadeout(index, 0);
                fadein(index + 1, 0);
                index++;
                if (index === uli_n) {
                    fadeout(index, 0);
                    fadein(0, 0);
                    index = 0;
                }
            });
            function fadeout(a, e) {
                $("ul li").eq(a).animate({"opacity": 0}, e);
                $("ul li").eq(a).removeClass("select");
            }
            function fadein(a, e) {
                $("ul li").eq(a).animate({"opacity": 1}, e);
                $("ol li").eq(a).addClass("active").siblings().removeClass("active");
                $("ul li").eq(a).addClass("select");
            }
            function auto() {
                fadeout(index, time);
                fadein(index + 1, time);
                index++;
                if (index === uli_n) {
                     fadeout(0, 0);
                    fadeout(index, time);
                    fadein(0, time);
                    index = 0;
                }
            }
            tick = setInterval(function () {
                auto();
            }, 2500);
            oli.click(function () {
                index = $(this).index();
                uli.css({"opacity": 0});
                fadein(index, 0);
            });
            oli.hover(function () {
                clearInterval(tick);
                $(this).click();
            }, function () {
                tick = setInterval(function () {
                    auto();
                }, 2500);
            });
            span.hover(function () {
                clearInterval(tick);
            }, function () {
                tick = setInterval(function () {
                    auto();
                }, 2500);
            });
            ul.hover(function () {
                clearInterval(tick);
            }, function () {
                tick = setInterval(function () {
                    auto();
                }, 2500);
            });
        </script>
    </body>
</html>
